<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>jsx小练习</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <!-- Don't use this in production: -->
    <script src="../js/babel.min.js"></script>
  </head>

  <body>
    <div id="test"></div>

    <script type="text/babel">
      /* 
        定注意区分:【js语句(代码)】与【js表达式】
          1.表达式:一个表达式会产生一个值，可以放在任何一个需要值的地方
            下面这些都是表达式:
              (1). a
              (2). a+b
              (3). demo(1)
              (4). arr.map()
              (5). function test() {}
          2.语句(代码):
            下面这些都是语句(代码):
              (1).if(){}
              (2).for(){}
              (3).switch(){case : xxx}

      */
      // 模拟一些数据
      const data = ['Angular', 'React', 'Vue'];
      // const data2 = ['<li>Angular</li><li>React</li><li>Vue</li>']
      const VDOM = (
        <div>
          <h1>前端js框架列表</h1>
          <ul>
            {
              data.map((item, index) => {
                return <li key={index}>{item}</li>
              })
            }
          </ul>
        </div>
      )

      ReactDOM.render(VDOM, document.getElementById("test"))

      /* 
        jsx语法法则
          1.定义虚拟DOM时，不要写引号。
          2.标签中混入JS表达式时要用{}。I
          3.样式的类名指定不要用class，要用className。
          4.内联样式，要用style=i{key : value}}的形式去写。
          5.只有一个根标签。
          6.标签必须闭合。
          7.标签首字母
            (1).若小写字母开头，则将改标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
            (2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。
      */
    </script>

  </body>
</html>